<%--
  Created by IntelliJ IDEA.
  User: haojianlei
  Date: 2018-11-23
  Time: 13:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>重置密码</title>
        <link rel="shortcut icon" href="favicon.ico"> <link href="${pageContext.request.contextPath}/assets/shipui/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
        <link href="${pageContext.request.contextPath}/assets/shipui/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
        <link href="${pageContext.request.contextPath}/assets/shipui/css/animate.css" rel="stylesheet">
        <link href="${pageContext.request.contextPath}/assets/shipui/css/style.css?v=4.1.0" rel="stylesheet">
        <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/shipui/css/register.css">
        <script src="${pageContext.request.contextPath}/assets/shipui/js/jquery.min.js"></script>
        <script src="${pageContext.request.contextPath}/assets/shipui/js/bootstrap.min.js"></script>
        <link href="${pageContext.request.contextPath}/assets/shipui/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
        <script src="${pageContext.request.contextPath}/assets/shipui/js/plugins/sweetalert/sweetalert.min.js"></script>
        <style>
            .bk {
                background-image: url("http://download2.huizhaochuan.com.cn/bg002323.jpg");
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }
            .loginInput{
                border-color: #878787 !important;
                border-style: solid;
                border-top-width: 0px;
                border-right-width: 0px;
                border-bottom-width: 1px;
                border-left-width: 0px;
                border-radius: 0;
                width: 312px;
            }
            .loginBg{
                width: 620px;
                margin: 0px auto;
                padding-top: 30px;
                padding-bottom: 30px;
                border-top: 2px solid #00a1ff;
                background-color: white;
                color: #888;
                box-shadow: 0 0 10px #9e9ca6;
                border-radius: 5px;
            }
        </style>
    </head>
    <body class="bk">
        <header style="background-color: white">
            <div class="body_top">
                <div class="top_left" style="margin-left: 30px">
                    <a href="toLogin.do"> <img src="http://download2.huizhaochuan.com.cn/logo_register.png" style="width: 160px;margin-top: 10px"></a>
                    <span>找回密码</span>
                </div>
                <div class="top_right" style="margin-top: 10px">
                    <span style="margin-right: 30px;font-size: 16px;">服务电话:&nbsp;400-123-9981</span>
                </div>
            </div>
        </header>
        <div class="container">
            <div class="container_top">
                <div class="slogan">
                    <ul>
                        <li>
                            <span>船舶总数17,222,106+</span>&nbsp;
                            <b>|</b>
                        </li>
                        <li>
                            <span>安全运行2961天+</span>&nbsp;
                            <b>|</b>
                        </li>
                        <li>
                            <span>覆盖行业100+</span>&nbsp;
                        </li>
                    </ul>
                </div>
            </div>
            <div class="form-horizontal loginBg">
                <div class="form-group">
                    <label for="phoneNum" class="col-sm-3 control-label">手机号:</label>
                    <div class="col-sm-7">
                        <input type="text" class="col-sm-5 form-control loginInput" id="phoneNum" onblur="checkPhoneNum()" placeholder="请输入手机号" style="width: 312px;"/>&nbsp;&nbsp;
                        <!--判断格式是否有误 -->
                        <p class="col-sm-5" id="phone_msg"  style="height: 0px">&nbsp;</p>
                    </div>
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-sm-12-offset-2">
                            <label  class="col-sm-3 control-label" style="padding-right: 4px;">&nbsp;&nbsp;验证码:</label>
                            <div class="col-sm-4">
                                <input type="text" maxlength="4" class="form-control loginInput" id ="verification" placeholder="请输入验证码" tabindex="4" id="randCode" style="margin-left: 12px;width: 180px"/>
                            </div>
                            <div class="col-sm-4" style="margin-left: 12px;padding-left: 0px;">
                                <input  type="button" id="btn" class="btn btn-primary" value="获取验证码"  />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="pwd" class="col-sm-3 control-label">新密码:</label>
                    <div class="col-sm-7">
                        <input type="text" class="col-sm-5 form-control loginInput" id="pwd" onblur="checkPasswordNum()" placeholder="6-20个字符，区分大小写" style="width: 312px;"/>
                        <!--判断格式是否有误 -->
                        <p class="col-sm-5" id="pwd_msg"  style="height: 0px">&nbsp;</p>
                    </div>
                </div>
                <div class="form-group">
                    <label  for="rePwd" class="col-sm-3 control-label">确认密码:</label>
                    <div class="col-sm-7">
                        <input type="text" class="col-sm-5 form-control loginInput" id="rePwd"  onblur="checkPwd()" placeholder="请再次输入密码" style="width: 312px;"/>
                        <!--判断格式是否有误 -->
                        <p class="col-sm-10" id="rePwd_msg"  style="height: 0px">&nbsp;</p>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-10">
                        <button type="submit" class="btn btn-primary" id="register_btn"  style="width: 320px;height: 45px">立即修改</button>
                    </div>
                </div>
                <div class="form-group">
                    <div class="row" style="text-align: center">
                        <span>已有账号?&nbsp;<a href="toLogin.do">直接登录</a></span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 对输入的手机号正确性做判断-->
        <script type="text/javascript">
            <!-- 对输入的手机号正确性做判断-->
            function checkPhoneNum() {
                var reg=/^1\d{10}$/;//正则表达式
                var phone=document.getElementById("phoneNum").value;
                var p=document.getElementById("phone_msg");
                if(reg.test(phone)){
                    p.innerHTML="";
                    // p.style.color="#5AB85C";
                    return true;
                }else{
                    p.innerHTML="手机号格式不正确";
                    p.style.color="red";
                    return false;
                }
            }

            <!-- 对输入的密码正确性做判断-->
            function checkPasswordNum() {
                var reg = /^([a-z0-9\.\@\!\#\$\%\^\&\*\(\)]){6,20}$/i;//正则表达式
                var pwd = $("#pwd").val();
                if(reg.test(pwd)){
                    $("#pwd_msg").text("");
                    // $("#pwd_msg").css("color","#5AB85C");
                    return true;
                }else{
                    $("#pwd_msg").text("密码不格式正确");
                    $("#pwd_msg").css("color","red");
                    return false;
                }
            }

           <!-- 将两次密码是否相同做判断-->
            function checkPwd(){
                var pwd=document.getElementById("pwd").value;
                var rePwd=document.getElementById("rePwd").value;
                var p=document.getElementById("rePwd_msg");
                if(pwd!=rePwd){
                    p.innerHTML="两次输入的密码不一致";
                    p.style.color="red";
                    return false;
                }else{
                    p.innerHTML="&nbsp;&nbsp;";
                    return true;
                }
            }
        </script>

        <script type="text/javascript">
            var maxTime;
            var timer;
            //倒计时60s
            function CountDown() {
                if (maxTime >= 0) {
                    $("#btn").val(maxTime + "S");
                    $("#btn").attr("disabled",true);
                    --maxTime;
                }
                else{
                    clearInterval(timer);
                    $("#btn").val("获取验证码");
                    $("#btn").attr("disabled",false);
                }
                return;
            }

            //向用户发送验证码
            $("#btn").click(function() {
                if (!$('#phoneNum').val()) {
                    swal({
                        title: "请检查手机号!",
                        text: "请检查手机号码是否填写正确！",
                        type: "warning"
                    });
                    return  false;
                }
                // 使用ajax调接口
                var data = JSON.stringify({phoneNum:$('#phoneNum').val(),from:3});
                $.ajax({
                    url:'sendVerification.do',
                    data:data,
                    type:'post',
                    dataType:'json',
                    success: function(result){
                        if (result.SUCCESS) {
                            maxTime = 60;
                            timer = setInterval(CountDown, 1000);
                        }
                        else {
                            alert(result.MSG);
                        }
                    }
                })
            });

            //点击注册，提交数据
            $("#register_btn").click(function(){
                if (!$('#phoneNum').val() || !$('#pwd').val()  || !$('#rePwd').val() || !$('#verification').val()) {
                    swal({
                        title: "温馨提示",
                        text: "填写信息不完整！",
                        type: "warning"
                    });
                    return  false;
                }
                //使用ajax调接口
                var data=JSON.stringify({phoneNum:$('#phoneNum').val(),password:$('#pwd').val(),verification:$('#verification').val()});
                $.ajax({
                    url:'forgetPassword.do',
                    data:data,
                    type:'post',
                    dataType:'json',
                    success: function(result){
                        if (result.SUCCESS) {

                            swal({
                                title: "修改成功!",
                                text: "正在跳转登录页面",
                                type: "success"
                            });
                            setTimeout(function(){
                                location.href="toLogin.do";
                            },2000);

                        }
                        else {
                            alert(result.MSG);
                        }
                    }
                })
            });

            //    enter键监听事件
            $("body").keydown(function() {
                if (event.keyCode == "13") {//keyCode=13是回车键
                    $('#register_btn').click();
                }
            });
        </script>
    </body>
</html>
